<template>
  <div class="dialog-overlay" :class="{'active': overlayActive}" @click.self="close">
    <!-- 云朵背景 -->
    <div class="cloud cloud-1"></div>
    <div class="cloud cloud-2"></div>
    <div class="cloud cloud-3"></div>
    
    <!-- 主弹窗内容 -->
    <div class="dialog-content" :class="{'bounce-in': animate}">
      <!-- 标题栏 -->
      <div class="dialog-header">
        <div class="dialog-title">
          <h2>{{ editing ? '编辑日程' : '新建日程' }}</h2>
          <div class="title-underline"></div>
        </div>
        <button class="close-btn" @click="close">
          <i class="iconfont icon-close"></i>
        </button>
      </div>
      
      <!-- 内容区域 -->
      <div class="dialog-body">
        <div class="form-group">
          <label>
            <i class="iconfont icon-edit"></i>
            标题
          </label>
          <input 
            v-model="formData.title" 
            type="text" 
            placeholder="请输入日程标题"
            class="form-input"
          >
        </div>
        
        <div class="form-row">
          <div class="form-group">
            <label>
              <i class="iconfont icon-date"></i>
              日期
            </label>
            <input 
              v-model="formData.date" 
              type="date"
              class="form-input"
            >
          </div>
          
          <div class="time-group">
            <div class="form-group">
              <label>
                <i class="iconfont icon-time"></i>
                开始时间
              </label>
              <input 
                v-model="formData.startTime" 
                type="time"
                class="form-input"
              >
            </div>
            
            <div class="form-group">
              <label>
                <i class="iconfont icon-time"></i>
                结束时间
              </label>
              <input 
                v-model="formData.endTime" 
                type="time"
                class="form-input"
              >
            </div>
          </div>
        </div>
        
        <div class="form-group">
          <label>
            <i class="iconfont icon-message"></i>
            描述
          </label>
          <textarea 
            v-model="formData.description" 
            placeholder="请输入日程描述..."
            class="form-textarea"
          ></textarea>
        </div>
      </div>
      
      <!-- 操作栏 -->
      <div class="dialog-footer">
        <button class="btn cancel-btn" @click="close">
          <i class="iconfont icon-arrow-left"></i>
          <span class="btn-text">取消</span>
        </button>
        <button 
          v-if="editing"
          class="btn delete-btn" 
          @click="deleteSchedule"
        >
          <i class="iconfont icon-delete"></i>
          <span class="btn-text">删除</span>
        </button>
        <button 
          class="btn submit-btn" 
          @click="save"
        >
          <i class="iconfont icon-correct"></i>
          <span class="btn-text">保存</span>
        </button>
      </div>
    </div>
    
    <!-- 装饰元素 -->
    <div class="decoration star-1"><i class="iconfont icon-star"></i></div>
    <div class="decoration star-2"><i class="iconfont icon-star"></i></div>
    <div class="decoration star-3"><i class="iconfont icon-star"></i></div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { format } from 'date-fns'

const props = defineProps({
  schedule: {
    type: Object,
    default: null
  },
  selectedDate: {
    type: Date,
    required: true
  }
})

const emit = defineEmits(['save', 'delete', 'close'])

const animate = ref(false)
const overlayActive = ref(false)
const formData = ref({
  title: '',
  date: format(props.selectedDate, 'yyyy-MM-dd'),
  startTime: '09:00',
  endTime: '10:00',
  description: ''
})

const editing = computed(() => props.schedule !== null)

watch(() => props.schedule, (newVal) => {
  if (newVal) {
    formData.value = {
      title: newVal.title,
      date: newVal.date,
      startTime: newVal.startTime,
      endTime: newVal.endTime,
      description: newVal.description || ''
    }
  } else {
    formData.value = {
      title: '',
      date: format(props.selectedDate, 'yyyy-MM-dd'),
      startTime: '09:00',
      endTime: '10:00',
      description: ''
    }
  }
}, { immediate: true })

const save = () => {
  const scheduleData = {
    ...formData.value,
    id: props.schedule?.id || null
  }
  emit('save', scheduleData)
}

const deleteSchedule = () => {
  emit('delete', props.schedule.id)
}

const close = () => {
  animate.value = false
  overlayActive.value = false
  setTimeout(() => emit('close'), 350)
}

onMounted(() => {
  animate.value = true
  setTimeout(() => {
    overlayActive.value = true
  }, 50)
})
</script>

<style scoped lang="less">
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  overflow: hidden;
  font-family: var(--font-family-base);
  transition: background-color 0.3s ease-out;

  &.active {
    background-color: rgba(0, 0, 0, 0.45);
  }

  .cloud {
    position: absolute;
    font-size: 80px;
    opacity: 0;
    animation: float 8s infinite ease-in-out;
    z-index: -1;
    transition: opacity 0.5s ease;
    color: white;

    &.cloud-1 { top: 20%; left: 10%; animation-delay: 0s; }
    &.cloud-2 { top: 60%; right: 15%; animation-delay: 1s; }
    &.cloud-3 { bottom: 10%; left: 25%; animation-delay: 2s; }
  }

  &.active .cloud {
    opacity: 0.1;
  }

  .dialog-content {
    width: 500px;
    max-width: 90vw;
    background: var(--bs-bg-color);
    border-radius: var(--border-radius-base);
    overflow: hidden;
    transform: translateY(40px) scale(0.95);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

    &.bounce-in {
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    .dialog-header {
      padding: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--bs-theme-color);
      color: white;

      .dialog-title h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
      }

      .title-underline {
        height: 2px;
        width: 40px;
        background: white;
        border-radius: 1px;
        margin-top: 6px;
      }

      .close-btn {
        width: 32px;
        height: 32px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.2);
        border: none;
        color: white;
        font-size: 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;

        &:hover {
          background: rgba(255, 255, 255, 0.3);
        }
      }
    }

    .dialog-body {
      padding: 15px;

      .form-group {
        margin-bottom: 12px;

        label {
          display: flex;
          align-items: center;
          font-size: 13px;
          color: var(--bs-nav-link-color);
          margin-bottom: 6px;

          .iconfont {
            margin-right: 6px;
            font-size: 14px;
          }
        }

        .form-input, .form-textarea {
          width: 100%;
          padding: 10px;
          border: 1px solid var(--bs-border-color);
          border-radius: 2px;
          font-size: 13px;
          transition: all 0.3s;
          background: white;

          &:focus {
            outline: none;
            border-color: var(--bs-theme-color);
            box-shadow: 0 0 0 2px rgba(0, 145, 190, 0.1);
          }
        }

        .form-textarea {
          min-height: 70px;
          resize: vertical;
        }
      }

      .form-row {
        display: flex;
        gap: 12px;

        .form-group {
          flex: 1;
        }
      }

      .time-group {
        display: flex;
        gap: 12px;
        width: 100%;

        .form-group {
          flex: 1;
        }
      }
    }

    .dialog-footer {
      padding: 12px 15px;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      background: var(--bs-bg-color);
      border-top: 1px solid var(--bs-border-color);

      .btn {
        padding: 8px 16px;
        border-radius: 2px;
        border: 1px solid var(--bs-border-color);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s;

        &.cancel-btn {
          background: white;
          color: var(--bs-text-color);

          &:hover {
            background: var(--bs-gray-color);
            transform: translateY(-1px);
          }
        }

        &.delete-btn {
          background: var(--bs-warn-color);
          color: white;
          border-color: var(--bs-dark-color);

          &:hover {
            background: var(--bs-dark-color);
            transform: translateY(-1px);
          }
        }

        &.submit-btn {
          background: var(--bs-theme-color);
          color: white;
          border-color: var(--bs-dark-color);

          &:hover {
            background: var(--bs-dark-color);
            transform: translateY(-1px);
          }
        }
      }
    }
  }

  .decoration {
    position: absolute;
    font-size: 18px;
    animation: float 6s infinite ease-in-out;
    z-index: -1;
    color: var(--bs-theme-color);
    opacity: 0;

    &.star-1 { top: 15%; right: 15%; animation-delay: 0.5s; }
    &.star-2 { top: 70%; left: 15%; animation-delay: 1s; }
    &.star-3 { bottom: 15%; right: 20%; animation-delay: 1.5s; }
  }

  &.active .decoration {
    opacity: 0.1;
  }
}

@keyframes float {
  0%, 100% { 
    transform: translateY(0) translateX(0) rotate(0deg); 
  }
  25% { 
    transform: translateY(-15px) translateX(5px) rotate(2deg); 
  }
  50% { 
    transform: translateY(0) translateX(10px) rotate(0deg); 
  }
  75% { 
    transform: translateY(-10px) translateX(-5px) rotate(-2deg); 
  }
}

@keyframes bounce {
  0%, 100% { 
    transform: translateY(0) scale(1); 
  }
  50% { 
    transform: translateY(-8px) scale(1.05); 
  }
}

@media (max-width: 600px) {
  .dialog-content {
    width: 90vw;

    .dialog-header {
      padding: 12px;

      .dialog-title h2 {
        font-size: 16px;
      }
    }

    .dialog-body {
      .form-row, .time-group {
        flex-direction: column;
        gap: 12px;
      }
    }

    .dialog-footer .btn {
      padding: 6px 12px;
      font-size: 12px;
    }
  }
}

/* 日期和时间输入框的样式调整 */
input[type="date"],
input[type="time"] {
  appearance: none;
  -webkit-appearance: none;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.5);
  cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  filter: invert(0.3);
}
</style>